<template>
	<view class="main">
		<view class="demo" style="width: 100%;font-weight: bold;color: white;text-align: center;">
			<span
				>{{startTime}}
				至 {{endTime}} {{deptName}} 分层审核周报</span>
		</view>
		<view class="demo">
			<span style="width: 100%;font-weight: bold;color: white;text-align: center;">
				一、审核计划管理（目的：考察审核人员审核完成能力）
			</span>
		</view>
		<view class="demo">
			<span style="width: 100%;font-weight: bold;color: white;text-align: center;">
				{{shlText}}
			</span>
		</view>

		<view class="demo">
			<h-title title="(1)近5周审核完成率" color="#ffaa00" gradients boxShadow moreShow></h-title>
		</view>
		<view class="charts-box">
			<view class="content title">
				近五周审核完成率
			</view>
			<qiun-data-charts type="line" :opts="opts" :chartData="chartData" />
		</view>
		<view>
			<view class="demo">
				<h-title title="(2)未完成审核任务人员清单" color="#ffaa00" gradients boxShadow moreShow></h-title>
				<lq-table :data="data" :column="column">
					<template v-slot:planDate="{row,index}">
						<text>{{formatDate(row.PLAN_TIME)}}</text>
					</template>

				</lq-table>
			</view>
		</view>

		<view class="demo">
			<span style="width: 100%;font-weight: bold;color: white;text-align: center;">
				二、审核实施管理（评估本车间/科室识别问题能力）
			</span>
		</view>
		<view class="demo">
			<span style="width: 100%;font-weight: bold;color: white;text-align: center;">
				{{sbwtText}}
			</span>
		</view>
		<view>
			<view class="demo">
				<h-title title="(1)近5周发起问题数量" color="#ffaa00" gradients boxShadow moreShow></h-title>
			</view>
		</view>
		<view class="charts-box">
			<view class="content title">
				近5周发起问题数量
			</view>
			<qiun-data-charts type="line" :opts="opts" :chartData="chartW5fq" />
		</view>
		<view>
			<view class="demo">
				<h-title title="(2)近5周人均提出项数" color="#ffaa00" gradients boxShadow moreShow></h-title>
			</view>
		</view>
		<view class="charts-box">
			<view class="content title">
				近5周人均提出项数
			</view>
			<qiun-data-charts type="line" :opts="opts" :chartData="chartW5tc" />
		</view>
		<view>
			<view class="demo">
				<h-title title="(3)审核问题分类TOP5" color="#ffaa00" gradients boxShadow moreShow></h-title>
			</view>
		</view>
		<view class="charts-box">
			<view class="content title">
				审核问题分类TOP5
			</view>
			<qiun-data-charts type="column" :opts="opts" :chartData="chartTop5" />
		</view>
		<view class="demo">
			<span style="width: 100%;font-weight: bold;color: white;text-align: center;">
				三、问题管理（评估本车间/科室问题解决的能力）
			</span>
		</view>
		<view class="demo">
			<span style="width: 100%;font-weight: bold;color: white;text-align: center;">
				{{quesText}}
			</span>
		</view>
		<view>
			<view class="demo">
				<h-title title="超期问题清单" color="#aa0000" gradients boxShadow moreShow></h-title>
				<lq-table :data="overdueQuestiuonData" :column="columnCQ" width="100%">
					<template v-slot:createDate="{row,index}">
						<text>{{formatDate(row.CREATE_TIME)}}</text>
					</template>
					<template v-slot:owerName="{row,index}">
						<text v-if="row.OWERNAME">{{row.OWERNAME}}</text>
						<text v-else>---</text>
					</template>

				</lq-table>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getPlanBy5Week,
		getNoPlanUserData,
		getOpenQuestionData,
		getOverdueQuestiuonData,
		getTextDisplayData,
		getPlanIssueTOP5Data
	} from "../../static/main.js"
	export default {
		data() {
			return {
				chartData: {},
				shlText: '',
				sbwtText: "",
				startTime: "",
				endTime: "",
				deptName: "",
				chartTop5: {},
				chartW5fq: {},
				chartW5tc: {},
				deptName: "",
				quesText:"",
				//您可以通过修改 config-ucharts.js 文件中下标为 ['line'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
				opts: {
					color: ["#FAC858"],
					padding: [15, 10, 0, 15],
					enableScroll: false,
					legend: {
						fontColor: "#fff"
					},
					xAxis: {
						disableGrid: true,
						fontColor: "#fff"
					},
					yAxis: {
						gridType: "dash",
						dashLength: 2,
						data: [{
							min: 0,
							fontColor: "#fff",
						}]
					},
					extra: {
						line: {
							type: "straight",
							width: 2,
							activeType: "hollow",

						}
					}
				},
				columnCQ: [{
					type: 'index',
					label: '序号',
					width: '5'
				}, {
					label: '创建日期',
					width: '35',
					slotName: 'createDate',
					type: 'slot',
				}, {
					label: '线体名称',
					prop: 'PL_NAME',
					width: '25'

				}, {
					label: '问题描述',
					prop: 'QUESTION_REMARK',
					width: '30'
				}, {
					label: '责任人',
					slotName: 'owerName',
					type: 'slot',
					width: '5'
				}, {
					label: '状态',
					prop: 'CHAOQI',
					width: '5'
				}],
				column: [{
					type: 'index',
					label: '序号',
					width: '40',
				}, {
					label: '审核计划日期',
					width: '150',
					type: 'slot',
					slotName: 'planDate'
				}, {
					label: '审核线体',
					prop: 'PLMANAGE_NAME',
				}, {
					label: '姓名',
					prop: 'NAME',
					width: '100',
				}],
				data: [],
				openQuestiuonData: [],
				overdueQuestiuonData: [],
			};
		},
		onReady() {
			this.startTime = localStorage.getItem("startTime");
			this.endTime = localStorage.getItem("endTime");
			this.deptName = localStorage.getItem("deptName")
			//获取近近五周审核完成率
			this.getServerData();
			//未完成审核任务人员清单
			this.getNoPlanUser();
			// //开放问题清单
			// this.getOpenQuestion();
			//超期问题清单
			this.overdueQuestiuon();
			//文字描述
			this.getTextDisplay();
			//审核问题分类TOP5
			this.getPlanIssueTOP5();
		},
		methods: {
			//审核问题分类TOP5
			getPlanIssueTOP5() {
				const vm = this;
				getPlanIssueTOP5Data().then(res => {
					console.log(res)
					const resault = res.data
					if (resault.code == "200") {
						const data = resault.data
						let categoriesArr = []
						let categoriesdata = []
						for (var index = 0; index < data.length; index++) {
							categoriesArr.push(data[index].WTTKBH)
							categoriesdata.push(data[index].issueNum)
						}
						let res = {
							categories: categoriesArr,
							series: [{
								name: "数量",
								data: categoriesdata,
								centerTextColor: "#fff",
								textColor: "#fff",
								pointShape: "triangle"
							}]
						};
						vm.chartTop5 = JSON.parse(JSON.stringify(res));
					}

				})

			},
			//文字描述
			getTextDisplay() {
				const vm = this
				getTextDisplayData().then(res => {
					const resault = res.data
					let auditRate = "0%";
					let auditSize = 0;
					let closeNum = 0;
					let divisionName = "";
					let issuesRaised = 0;
					let openNum = 0;
					let reviewCount = 0;
					let totleNum = 0;
					let initTotleNum = 0
					if (resault.code == "200") {
						const data = resault.data
						auditRate = data.auditRate;
						auditSize = data.auditSize;
						closeNum = data.closeNum;
						divisionName = data.divisionName;
						issuesRaised = data.issuesRaised;
						openNum = data.openNum;
						reviewCount = data.reviewCount;
						totleNum = data.totleNum;
						initTotleNum = data.initTotleNum;
							vm.deptName = data.divisionName
					}
					console.log("getTextDisplay", res)
					vm.deptName = divisionName
					vm.shlText = divisionName +
						" 本周审核计划共" + auditSize + "项，完成" + reviewCount + "项，计划完成率" + auditRate;
					vm.sbwtText = "共识别问题"+initTotleNum+"项，人均审核问题提出" + issuesRaised + "项/人/次";
					vm.quesText = "截至当前，"+divisionName+" 责任问题"+totleNum+"项，关闭问题"+closeNum+"项，开放问题"+openNum+"项，超期问题清单";
				})
			},
			//超期问题清单
			overdueQuestiuon() {
				const vm = this
				getOverdueQuestiuonData().then(res => {
					const resault = res.data
					if (resault.code == "200") {
						const overdueissuesFinallyList = resault.data.overdueissuesFinallyList;
						const overdueissuesList= resault.data.overdueissuesList
						overdueissuesFinallyList.push(...overdueissuesList)
						vm.overdueQuestiuonData = overdueissuesFinallyList;
					}

					// vm.overdueQuestiuonData = res.data.data;
				})
			},
			// //开放问题清单
			// getOpenQuestion() {
			// 	const vm = this
			// 	getOpenQuestionData().then(res => {
			// 		vm.openQuestiuonData = res.data.data;
			// 	})
			// },
			//格式化日期
			formatDate(dateString) {
				const date = new Date(dateString);
				return date.toLocaleDateString('zh-CN', {
					year: 'numeric',
					month: '2-digit',
					day: '2-digit'
				});
			},
			//未完成审核任务人员清单
			getNoPlanUser() {
				const vm = this
				getNoPlanUserData().then(res => {
					vm.data = res.data.data;
				})
			},
			//获取近近五周审核完成率
			getServerData() {
				const vm = this
				getPlanBy5Week().then(res => {
					const resault = res.data
					
					if (resault.code == "200") {
						const data = resault.data
						let categoriesArr = []
						let categoriesdata = []
						let categoriesfq = []
						let categoriestc = []
						var length = data.length - 1;
						for (var index = 0; index < data.length; index++) {
							categoriesArr.push(data[length - index].WEEK)
							categoriesdata.push(data[length - index].auditRate.substring(0, data[length - index]
								.auditRate.length - 1))
							categoriesfq.push(data[length - index].issueNum)
							categoriestc.push(data[length - index].issuesRaised)
						}
						let res = {
							categories: categoriesArr,
							series: [{
								name: "完成率",
								data: categoriesdata,
								centerTextColor: "#fff",
								textColor: "#fff",
								pointShape: "triangle"
							}]
						};
						vm.chartData = JSON.parse(JSON.stringify(res));
						let resfq = {
							categories: categoriesArr,
							series: [{
								name: "数量",
								data: categoriesfq,
								centerTextColor: "#fff",
								textColor: "#fff",
								pointShape: "triangle"
							}]
						};
						vm.chartW5fq = JSON.parse(JSON.stringify(resfq));
						let restc = {
							categories: categoriesArr,
							series: [{
								name: "数量",
								data: categoriestc,
								centerTextColor: "#fff",
								textColor: "#fff",
								pointShape: "triangle"
							}]
						};
						vm.chartW5tc = JSON.parse(JSON.stringify(restc));
						
						
						
					}
				});

			},
		}
	};
</script>

<style scoped>
	.main {
		background-image: url("../../static/allbgc.png");
		background-size: 100% 50%;
	}

	/* 请根据实际需求修改父元素尺寸，组件自动识别宽高 */
	.charts-box {
		width: 100%;
		height: 300px;
		padding-bottom: 50px;
		background-size: 100% 100%;
		margin-top: 5px;
	}

	.demo {
		margin-top: 5px;
		padding: 5px;
	}

	.title {

		font-weight: bold;
		text-align: center;
		color: white;
		margin-left: 15px;
		padding: 13px;
	}

	.textArea {
		text-align: left;
		width: 100%;
		font-weight: bold;
		margin: 5px;
	}
</style>